<template>
	<list class="gift-liwu" :show-scrollbar="false" :bounce="false">
		
		      
		
		<cell class="w-liwu-ti" :insert-animation="defaultst" delete-animation="default" :recycle="false" :ref="'item'+index"
			v-for="(item,index) in gifts" :key="index" :id="'danmu'+item.id">
			 <u-transition :show="item.show" mode="slide-left">
			<view class="gf-kuang">
				<view class="gf-aut-tx">
					<image class="gf-aut-tx_img" :src="item.name_img" mode="aspectFill"></image>
				</view>
				<view class="gf-name">
					<text class="gf-name-text" style="font-size: 30rpx; color: #ffffff;">{{item.username}}</text>
					<text class="gf-name-text">{{item.gift_name}}</text>
				</view>
				<view class="gf-img">
					<image class="gf-img-img" src="../../static/Image/pijiu.png" mode="aspectFill"></image>
				</view>
				<view class="chenfen-vie">
					<text style="font-size: 35rpx; color: #ffffff;">X</text><text class="cheng-fa">{{item.id}}</text>
				</view>

			</view>
			</u-transition>
		</cell>
		

	</list>
	
</template> 
<script>
	const dom = weex.requireModule('dom');
	export default {

		data() {
			return {
				gifts: [], //测试数据
				scrollIntoView: "", //至于底部 这个有点特殊 （简单点的意思就是 不能以数字开头 可以这样写；"id"+id,拼接） 值应为某子元素id（id不能以数字开头）。设置哪个方向可滚动，则在哪个方向滚动到该元素
				showScrollbar: false,
				defaultst:"default"
			}
		},
		created() {
			this.sendingGifts()
		},
		methods: {
			//发送礼物
			sendingGifts() {
				let id = 0;
				setInterval(() => {
					this.gifts.push({
						id:id,
						name_img: '../../static/Image/Tx.png',
						username: '发送人',
						avatar: '../../static/Image/pijiu.png',
						gift_name: '啤酒',
						num: 1,
						show:true
					})
					id++;
					this.bot();
				}, 1000)
			},
			//自动消失
			autoHide() {
				console.log(this.gifts[0])
				if (this.gifts.length) {
					let timer = setTimeout(() => {
						this.gifts.splice(0, 1);
						this.gifts[0].show=false;
						
					}, 3000)
				}
			},
			//至于底部
			bot() {
				this.$nextTick(() => {
					let index = this.gifts.length - 1;
					let ref = 'item' + index;
					if (this.$refs[ref]) {
						dom.scrollToElement(this.$refs[ref][0], {});
					}
				},200)


			}
		}
	}
</script>

<style scoped>
	/* 礼物开始 */
	.gift-liwu {
		width: 500rpx;
		height: 400rpx;
		/* background-color: #ff3549; */
		overflow: hidden;
		margin-top: 600rpx;
		
		position: absolute;
		transition: 0.3s;
		z-index: 80;
	}

	.w-liwu-ti {
		width: 500rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		transition: 0.3s;
		
	}

	.gf-kuang {
		width: 370rpx;
		border-radius: 50rpx;
		background-color: rgba(0, 0, 0, 0.3);
		padding: 13rpx 13rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-bottom: 30rpx;
		transition: 0.3s;
		margin-left: 30rpx;
	}

	.gf-aut-tx {
		width: 70rpx;
		height: 70rpx;
		background-color: #8a8a8a;
		border-radius: 50rpx;
		overflow: hidden;
	}

	.gf-aut-tx_img {
		width: 70rpx;
		height: 70rpx;
		border-radius: 50rpx;
	}

	.gf-name {
		width: 130rpx;
		font-size: 30rpx;
		height: 60rpx;

		padding: 0 15rpx;
		display: flex;
		flex-direction: column;
	}

	.gf-name-text {
		font-size: 27rpx;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		lines: 1;
		color: #55aaff;
	}

	.gf-img {
		width: 65rpx;
		height: 65rpx;
		overflow: hidden;
	}

	.gf-img-img {
		width: 65rpx;
		height: 65rpx;
	}

	.chenfen-vie {
		display: flex;
		flex-direction: row;
		align-items: flex-end;
		margin-left: 10rpx;
	}

	.cheng-fa {
		font-size: 45rpx;
		color: #ffffff;
		font-style: italic;
	}
</style>